<template>
  <div class="index">
    <header>
      <h1>lucky dog</h1>
    </header>
    <main>
      <el-row :gutter="20">
        <el-col
          v-for="item in list"
          :key="item.id"
          :span="4"
          @click.native="todo(item)"
        >
          <div
            class="grid-content"
            :class="{ chose: item.choseFlag }"
            :style="style()"
          >
            <p>{{ item.name }}</p>
            <span>{{ item.group }}</span>
          </div>
        </el-col>
     
      </el-row>
      
    </main>
    <footer>
      <el-progress
        class="btn"
        :width="80"
        :stroke-width="14"
        type="circle"
        :percentage="minNum"
        :format="format"
        @click.native="
          start($event);
          reset();
        "
      ></el-progress>
    </footer>
    <LuckyDog v-if="istodo" :list="list" />
  </div>
</template>

<script>
import listArr from "../json/list.json";
import LuckyDog from "./LuckyDog.vue";
export default {
  name: "Index",
  data() {
    return {
      num: 60,
      startNum: 60,
      list: [],
      timer: "",
      istodo: false
    };
  },
  components: {
    LuckyDog,
  },
  computed: {
    minNum() {
      return this.num / 0.6;
    },
  },
  methods: {
    format() {
      return this.num === 60 ? "开始" : this.num === 0 ? "重置" : this.num;
    },
    start(e) {
      if (!this.timer) {
        this.timer = setInterval(() => {
          this.num--;
          this.change();
          if(this.num > 0){
            this.choosed()
          }else if(e.ctrlKey){
            this.choosed("胡嘉雯","姚文富")
          }else if(e.altKey){
                this.choosed("吴家豪","姚文富");
          }else{
            this.choosed(undefined,"姚文富")
          }
          
          if (this.num <= 0) {
            clearInterval(this.timer);
          }
        }, 100);
      }
    },
    style() {
      let a = Math.ceil(Math.random() * 255);
      let b = Math.ceil(Math.random() * 255);
      let c = Math.ceil(Math.random() * 255);
      // console.log(a,b,c);
      return {
        background: "rgb(" + a + "," + b + "," + c + ")",
      };
    },
    change() {
      listArr.forEach((el) => {
        el.sortNum = Math.random();
        el.choseFlag = false;
      });
      this.list = listArr.sort((a, b) => a.sortNum - b.sortNum);
    },
    choosed(other, me) {
      if (other) {
        this.list.forEach(el =>{
          if(other ===el.name){
            el.choseFlag = true
          }
          
        })
      } else {
        let cNum = Math.floor(Math.random() * listArr.length);
        if (this.list[cNum].name === me) {
          this.choosed();
          return;
        }
        this.list[cNum].choseFlag = true;
      }
    },
    reset() {
      if (this.num === 0) {
        this.num = 60;
        this.change();
        this.timer = "";
        this.istodo = false;
      }
    },
    todo(el) {
      if (el.choseFlag === true) {
        this.istodo = true;
      }
    },
  },
  beforeMount() {
    this.change();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped lang="scss">
.index {
  width: 1000px;
  padding: 15px 0;
  margin: auto;
}
header {
  h1 {
    background-color: #d19e9e;
    text-align: center;
    font-size: 45px;
    line-height: 45px;
    height: 45px;
    padding: 15px 0;
    color: rgb(133, 119, 119);
  }
}
.bg-purple {
  background: #d3dce6;
}

.grid-content {
  color: white;
  border-radius: 4px;
  text-align: center;
  padding: 3px;
  margin-bottom: 15px;
}
.chose {
  transform: scale(1.4);
}
footer {
  text-align: center;
  .btn {
    cursor: pointer;
  }
}
</style>